<template>
    <div>

        <searchBar :condtions="condtions" @search="search"></searchBar>
        <Table :context="self" :data="tableData" :columns="tableColumnsIn" border stripe
               @on-selection-change="onSelectionChange"></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" :current="pageNumber" @on-change="changePage"></Page>
            </div>
            <div style="float: right;margin-right: 50px">
                <Button @click="pick">pick</Button>
            </div>
        </div>
    </div>
</template>

<script>

    import searchBar from './searchBar.vue';

    const _ = require('lodash');

    export default {
        components: {searchBar},
        props: ['tableData', 'tableColumns', 'condtions', 'total', 'pageNumber'],
        data ()
        {

            let tableColumnsT = _.clone(this.tableColumns);

            _.forEach(tableColumnsT, function (ele) {
                if (_.isEmpty(ele.render)) {
                    ele.render = function (row) {
                        //直接设置title，方便查看
                        return `<span title="${row[ele.key]}">${row[ele.key]}</span>`
                    }
                }
            });


            let config = {
                conditonStr: null,
                self: this,
                tableColumnsIn: _.concat([{
                    type: 'selection',
                    width: 60,
                    align: 'center'
                }], tableColumnsT, {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render(row, column, index)
                    {
                        return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button>`;
                    }
                })
            };
            return config;
        }
        ,
        mounted()
        {
            this.changePage(1);
        }

        ,
        methods: {

            onSelectionChange(selection)
            {
                this.selection = selection;
            },
            pick()
            {
                this.$emit('pick', this.selection);
            }
            ,
            show(index)
            {
                this.$emit('show', this.tableData[index]);
            }
            ,
            search(condtion)
            {
                this.acquireItems(1, condtion);
                this.conditonStr = condtion;
            }
            ,
            acquireItems(page, condtion)
            {
                this.$emit('acquireItems', page, condtion);
            },
            changePage(page)
            {
                this.acquireItems(page, this.conditonStr);
            }
        }
    }
</script>
